// 引入Element主题定义
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@use 'element/index' as *;

// 主色调
// - 主色调，如需调整，同时也许要调整assets/style/element/index.scss中的主题色
$--color-primary: #2d8cf0;
$--color-primary-light: mix($color-white, $--color-primary, 20%);
$--color-primary-dark: mix($color-black, $--color-primary, 10%);
// - 危险色，如需调整，同时也许要调整assets/style/element/index.scss中的危险色
$--color-danger: #F56C6C;

// 菜单
$--menu-background-color: #2f3044;
$--menu-hover-background-color: mix($color-white, $--menu-background-color, 20%);
$--submenu-background-color: mix($color-black, $--menu-background-color, 20%);
// 危险色
$--color-danger-hover: mix($color-white, $--color-danger, 20%);
:root {
  // 基础
  // - 主色调，如需调整，同时也许要调整assets/style/element/index.scss中的主题色
  --color-primary: #{$--color-primary};
  --color-primary-light: #{$--color-primary-light};
  --color-primary-dark: #{$--color-primary-dark};
  // - 危险色，如需调整，同时也许要调整assets/style/element/index.scss中的危险色
  --color-danger: #{$--color-danger};
  --color-danger-hover: #{$--color-danger-hover};
  // - 基础色
  --color-light: #fff;
  --color-gray: #999;
  --color-gray-deep: #555;
  // - 页面最小宽度
  --page-min-width: 1296px;
  // - 背景色
  --background-color: #f7f7f7;
  // - 登录按钮背景
  --login-button-background-color: linear-gradient(130deg, var(--color-primary-light) 0%, var(--color-primary-dark) 100%);
  // - 字体
  --font-color: #282828;
  --font-size: 13px;
  --font-family: 'Avenir', Helvetica, Arial, sans-serif;
  // - 边框
  --border-color: #eee;
  // 间距
  --gap: 12px;
  // - 样式过渡时间
  --transition-duration: 0.15s;

  // 头部
  --header-height: 60px;
  --header-background-color: #fff;
  --header-text-color: #333;

  // 表格
  --table-header-background-color: #f8f8f9;
  --table-header-font-color: #666;

  // 菜单
  --menu-width: 218px;
  --menu-background-color: #{$--menu-background-color};
  --menu-hover-background-color: #{$--menu-hover-background-color};
  --menu-text-color: #9f9f9f;
  --menu-text-hover-color: #f7f7f7;
  --menu-active-background-color: #f7f7f7;
  --menu-active-text-color: #333;
  --menu-active-text-hover-color: #333;
  --submenu-background-color: #{$--submenu-background-color};
  // - 菜单选中后的圆弧大小
  --menu-active-radius-size: 10px;
}
